<template>
  <CustomTableCard 
    footer
    :total="total" 
    :page.sync="queryParams.page" 
    :limit.sync="queryParams.limit" 
    :width="1000"
    @on-page="getList" 
    title="添加">
    <div slot="header">
      <v-row>
        <v-col cols="2">
          <v-select
            v-model="queryParams.status"
            :items="statusParams"
            item-text="value"
            item-value="key"
            label="选择状态"
            solo
            dense
            outlined
            flat
            hide-details
            clearable
            @change="getList"
          ></v-select>
        </v-col>
        <v-col cols="2">
          <v-select
            v-model="queryParams.date_type"
            :items="[{key: 1, name: '接团日期'}, {key: 5, name: '散团日期'}, {key: 6, name: '订团日期'}, {key: 2, name: '创建日期'}]"
            item-text="name"
            item-value="key"
            solo
            dense
            outlined
            flat
            hide-details
          ></v-select>
        </v-col>
        <v-col cols="3">
          <date-picker
            v-model="queryParams.betweenDate"
            type="daterange">
          </date-picker>
        </v-col>
        <v-col cols="2">
          <v-text-field
            label="搜索线路"
            outlined
            dense
            hide-details
          ></v-text-field>
        </v-col>
        <v-col>
          <v-btn color="info" class="mr-3" @click="getList">搜索</v-btn>
        </v-col>
        <v-col cols="2" class="text-right">
          <v-btn color="primary" @click="showDrawer = true">添加</v-btn>
        </v-col>
      </v-row>
    </div>
    <el-table
      v-loading="loading"
      v-auto-height
      :height="tableHeight"
      :data="tableData"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        fixed="left"
        prop="status"
        label="状态"
        width="100">
        <template slot-scope="{ row }">
          <v-chip :color="row.status |statusColor" text-color="white" small>{{ statusText[row.status] }}</v-chip>
        </template>
      </el-table-column>
      <el-table-column
        prop="code"
        label="订单号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="code_a"
        label="主团号"
        width="180">
        <template slot-scope="{ row }">
          <span>{{row.parent_code || '未成团'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="foundation_prodcut_name"
        label="产品名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="code_a"
        label="甲方团号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="plan_date"
        label="接团日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="back_date"
        label="散团日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="day_num"
        label="行程天数"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="人数"
        width="180">
        <template slot-scope="{ row }">
          <span class="mr-2">{{row.adult_num}}成人</span>
          <span v-if="row.bedkid_num">{{row.bedkid_num}}儿童</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="company_name"
        label="客户名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="operator_a"
        label="联系人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="operator_a_phone"
        label="联系电话"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="出发地"
        width="180">
      </el-table-column>
      <el-table-column
        prop="created_user_name"
        label="创建人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="order_date"
        label="订团日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="updated_at"
        label="更新时间"
        width="180">
      </el-table-column>
      <el-table-column
        fixed="right"
        prop="address"
        label="操作"
        align="center"
        width="180">
        <template slot-scope="{ row }">
          <v-btn v-if="row.status == 4" class="mr-2" small color="primary" outlined @click="showTransfer = true">转团</v-btn>
          <v-btn small color="warning" outlined @click="handleRmove(row)">删除</v-btn>
        </template>
      </el-table-column>
    </el-table>
    <div slot="actions">
      <MergeGroup :items="multipleSelection" @on-merge="getList">
        <template v-slot="{ toggle }">
          <v-btn small outlined color="primary" class="mr-2" :disabled="!multipleSelection.length" @click="toggle">拼团</v-btn>
        </template>
      </MergeGroup>
      <v-btn small outlined color="primary" class="mr-2" :disabled="!multipleSelection.length" @click="setStatusAll(2)">确认</v-btn>
      <!-- <v-btn small outlined color="primary" class="mr-2">删除</v-btn> -->
      <v-btn small outlined color="primary" class="mr-2" :disabled="!multipleSelection.length" @click="setStatusAll(3)">取消</v-btn>
    </div>
    <section slot="drawer" class="pa-3">
      <template v-for="item in [1,2,3,4,5]">
        <v-card :key="item" class="mb-4">
          <v-card-title class="pa-2 justify-space-between">
            <div>标题</div>
            <v-btn color="primary" rounded small>添加</v-btn>
          </v-card-title>
          <v-divider />
          <div class="d-flex pt-2">
            <div class="d-flex align-center flex-grow-1 px-3">
              <label style="width: 100px" class="text-right pr-3">姓名</label>
              <v-text-field
                placeholder="请输入"
                clearable
                dense
              ></v-text-field>
            </div>
            <div class="d-flex align-center flex-grow-1 px-3">
              <label style="width: 100px" class="text-right pr-3">年龄</label>
              <v-text-field
                placeholder="请输入"
                clearable
                dense
              ></v-text-field>
            </div>
          </div>
          <div class="d-flex">
            <div class="d-flex align-center flex-grow-1 px-3">
              <label style="width: 100px" class="text-right pr-3">公司名称</label>
              <v-text-field
                placeholder="请输入"
                clearable
                dense
              ></v-text-field>
            </div>
            <div class="d-flex align-center flex-grow-1 px-3">
              <label style="width: 100px" class="text-right pr-3">联系电话</label>
              <v-text-field
                placeholder="请输入"
                clearable
                dense
              ></v-text-field>
            </div>
          </div>
          <div class="d-flex align-center px-3">
            <label style="width: 100px" class="text-right pr-3">备注</label>
            <v-textarea
              placeholder="请输入"
              clearable
              auto-grow
              counter
              no-resize
              :rows="2"
              dense
            ></v-textarea>
          </div>
        </v-card>
      </template>
    </section>
  </CustomTableCard>
</template>

<script>
// @ is an alias to /src
import { mapMutations } from 'vuex'
import Transfer from './components/transfer'
import MergeGroup from './components/merge-group'
import mixin from './mixin'
import { getSpOrderList, removeSpOrder, spSetStatus } from '@/api/group'

export default {
  name: 'orderList',
  mixins: [mixin],
  components: {
    Transfer,
    MergeGroup
  },
  created() {
    this.getList()
  },
  activated() {
    this.getList()
  },
  deactivated() {
    console.log('deactivated')
  },
  filters: {
    statusColor(status) {
      let colors = {
        1: 'warning',
        2: 'success',
        3: 'default',
        4: 'info'
      }
      return colors[status]
    }
  },
  mounted() {

  },
  data() {
    return {
      loading: false,
      showTransfer: false,
      tableData: [],
      total: 0,
      statusParams: [
        { key: 1, value: '预留中' },
        { key: 2, value: '已确认' },
        { key: 3, value: '已取消' },
        { key: 4, value: '已成团' },
      ],
      statusText: {
        1: '预留中',
        2: '已确认',
        3: '已取消',
        4: '已成团'
      },
      queryParams: {
        page: 1,
        limit: 20,
        status: '',
        date_type: 1,
        betweenDate: [],
      },
      multipleSelection: []
    }
  },

  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getList(page) {
      if (/\d+/.test(page)) {
        this.queryParams.page = page
      }
      this.loading = true
      getSpOrderList(this.queryParams).then(response => {
        this.tableData = response.data.data
        this.total = response.data.count
      }).finally(() => {
        this.loading = false
      })
    },
    // 删除列表
    handleRmove(row) {
      let ids = []
      if (row) {
        ids = [row.id]
      } else {
        ids = this.multipleSelection.map(item => item.id)
      }
      this.$confirm(this.$t('tips.delete'), this.$t('other.tip'), {
        center: true,
        type: 'warning'
      }).then(() => {
        removeSpOrder({idArr: ids}).then(() => {
          this.$message.success('success')
          this.getList()
        })
      }).catch(() => {})
    },
    // 批量设置状态
    setStatusAll(status) {
      let ids = this.multipleSelection.map(item => item.id)
      if(status == 3) {
        this.$confirm(this.$t('tips.cancel'), this.$t('other.tip'), {
          center: true,
          type: 'warning'
        }).then(() => {
          this.updateStatus({idArr: ids, status})
        }).catch(() => {})
      } else {
        this.updateStatus({idArr: ids, status})
      }
    },
    // 更新状态
    updateStatus(params) {
      spSetStatus(params).then(() => {
        this.$message.success('success')
        this.getList()
      })
    },
  }
}
</script>
